<template>
  <div class="toux">
    <van-nav-bar
      title="修改头像"
      left-arrow
      @click-left="$router.go(-1)"
      right-text="保存"
      @click-right="savk"
    >
      <!-- @click-right="savee" -->
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
    </van-nav-bar>
    <van-uploader
      :after-read="afterRead"
      preview-size="200px"
      :preview-image="true"
      class="uploader"
      v-model="fileList"
      :max-count="1"
    >
    </van-uploader>
  </div>
</template>
<script>
/*
写样式结构,看修改用户信息文档(头像id，通过文件上传接口获取),先通过上传文件,获取文件id,在通过修改用户信息提交用户数据
*/
import { uploadAvatar, edit } from '@/api/api.js'
// import { mapState } from 'vuex',
export default {
  mounted () {
    this.fileList = [
      {
        url: this.$store.state.userInfo.avatar
      }
    ]
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      id: '',
      fileList: [
        // {
        //   url: '$store.state.userInfo.avatar',
        //   status: 'uploading',
        //   message: '上传中...'
        // }
      ]
    }
  },
  methods: {
    async afterRead (file) {
      console.log(file)
      //   file.status = 'uploading'
      //   file.message = '上传中...'
      //   const formData = new FormData()
      //   formData.append('file', file.file)
      // 上传接口
      const res = await uploadAvatar(file.file)
      this.id = res.data[0].id
      console.log(res)
    },
    async savk () {
      await edit({ avatar: this.id })
      this.$toast.success('用户信息更新成功')
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.toux {
  .van-cell__value {
    color: #9c9c9e;
  }
  /deep/ .uploader.van-uploader {
    display: flex;
    margin-left: 20%;
  }
  /deep/ .van-uploader__upload {
    //   width: 200px;
    // background-color: #f7f4f5;
    margin: auto;
    margin-top: 20px;
  }
}
</style>
